<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue-2.5.21.js"></script>
    <style>
        button {
            float: right;
            border: none;
        }
        
        .biaoti {
            color: black;
            font-size: 25px;
            font-weight: bold;
        }
        
        input {
            width: 80%;
            height: 20px;
            border-radius: 20px;
            margin-right: 10px;
        }
        
        .ss {
            color: aqua;
        }
        
        p {
            font-size: 18px;
            font-weight: bold;
            clear: both;
        }
        
        li {
            list-style: none;
        }
        
        .lishi>li {
            float: left;
            margin-right: 10px;
            margin-top: 10px;
            background-color: #f5f5ff;
            padding: 5px;
        }
        
        .faxian>li {
            float: left;
            margin-right: 10px;
            margin-top: 10px;
            background-color: #f5f5ff;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div id="big">
        <span class="biaoti">< 搜索</span> |<button>x</button><button>...</button><br>
        <input type="text" placeholder="搜索商家、商品名称" v-model="value"><span class="ss" @click="sousuo()">搜索</span>
        <p>历史搜索</p><br>
        <ul class="lishi">
            <li v-for="item in mylist1">{{item}}</li>

        </ul><br>
        <p>搜索发现</p>
        <ul class="faxian">
            <li v-for="item in mylist">{{item}}</li>

        </ul>
    </div>
</body>

</html>
<script>
    new Vue({
        el: "#big",
        data: {
            value: "",
            mylist1: ["天天鲜活三文鱼（立水桥店）"],
            mylist: ["麻辣烫", "米线", "披萨", "雪糕", "汉堡", "腊八粥", "烤肉拌饭", "炸鸡", "味多美（温阳路店）"],

        },
        methods: {
            sousuo() {
                if (this.value) {
                    this.mylist1.push(this.value)
                    this.value = ""
                }
            }
        },
    })
</script>